<template>
	<view class="con">
		<view class="nav">
			<view class="status_bar">
			</view>
			<view class="navbox">
				<u-icon name="arrow-left" color="#999" size="40" @click="back"></u-icon>
				<input type="text" placeholder="输入关键字搜索" class="input" v-model="goodsName">
				<u-icon name="shopping-cart" color="#F09238" size="40" @click="tocart"></u-icon>
				<view class="se" @click="search">搜索</view>
			</view>
		</view>
		<view class="xz">
			<view class="xz_i">
				<view class="x_item" :class="{'active':screenType==0}" @click="settype(0)">推荐</view>
				<!-- <view class="x_item" :class="{'active':screenType==1}" @click="settype(1)">附近</view> -->
				<view class="x_item" :class="{'active':screenType==1}" @click="settype(1)">销量</view>
			</view>
			<view class="xz_i" @click="value=true">
				<view class="x_item">{{addressName}}</view>
				<u-icon name="arrow-down" color="#999" size="24"></u-icon>
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="getlist">
			<view class="item" v-for="(item,index) in list" @click="top(item.goodsId)">
				<image :src="item.picUrl" mode="aspectFill" class="goodsimg"></image>
				<view class="goodscon">
					<view class="g_t">{{item.name}}{{item.brief}}</view>
					<view class="pricebox">
						<view class="price" v-if="item.isEnableGrade==0">{{item.retailIntegral}}积分</view>
						<view class="price" v-if="item.isEnableGrade==1">￥{{item.retailPrice}}</view>
						<view class="price" v-if="item.isEnableGrade==2">￥{{item.retailPrice}}+{{item.retailIntegral}}积分
						</view>
						<view class="num">销量：{{item.salesActual}}</view>
					</view>
					<view class="g_f">{{item.addressName}}</view>
				</view>
				<view class="right">
					{{item | juli}}
					<u-icon name="map-fill" color="#999" size="24"></u-icon>
				</view>
			</view>
		</scroll-view>
		<cityselect  v-model="value" @city-change="cityChange" @isshow="value=false"></cityselect>
	</view>
</template>

<script>
	import {
		productlist
	} from "../../api/product.js"
	var that;
	import cityselect from"../../components/city.vue"
	export default {
		data() {
			return {
				active: 0,
				num: 1,
				addressName:"全国", //市名称
				streetId: null, //社区id
				goodsName:'', //搜索的名称
				isEnableGrade:null, //(0积分 1会员  2:混合)
				screenType:0, //1销量
				list: [],
				longitude:null, //经度
				latitude:null,//纬度
				value:false,
				provinceId:null,
				cityId:null,
				areaId:null
			}
		},
		components:{
			cityselect
		},
		onLoad(e) {
			if(e.type){
				this.isEnableGrade=e.type
			}
			if(e.text){
				this.goodsName=e.text
			}
			uni.getLocation({
			    type:'wgs84',
				geocode:true,
			    success:(res)=> {
					this.addressName=res.address.city
					this.list=[]
					this.num=1
					this.getlist()
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					this.longitude=res.longitude //经度
					this.latitude=res.latitude
					console.log(res)
			    },
				fail:()=>{
					this.getlist()
				}
			});
			// #ifdef H5
			this.getlist()
			// #endif
			that = this
		},
		filters: {
			juli(val) {
				if (that.longitude != null && that.latitude != null) {
					return that.caculateLL(that.latitude, that.longitude,val.latitude,val.longitude)
				} else {
					return "未知距离"
				}
			}
		},
		onReachBottom() {},
		methods: {
			// 选择城市
			cityChange(e) {
				console.log(e)
				if(e.type==1){
					this.provinceId=e.regionId
					this.cityId=null
					this.areaId=null
					this.streetId=null
				}
				if(e.type==2){
					this.provinceId=null
					this.cityId=e.regionId
					this.areaId=null
					this.streetId=null
				}
				if(e.type==3){
					this.provinceId=null
					this.cityId=null
					this.areaId=e.regionId
					this.streetId=null
				}
				if(e.type==4){
					this.provinceId=null
					this.cityId=null
					this.areaId=null
					this.streetId=e.regionId
				}
				this.addressName=e.name
				this.list=[]
				this.num=1
				this.getlist()
			},
			// 切换推荐销量
			settype(e){
				this.screenType=e
				this.list=[]
				this.num=1
				this.getlist()
			},
			top(id){
				uni.navigateTo({
					url:"/pages/product/product?id="+id
				})
			},
			// 搜索
			search(){
				console.log(this.goodsName)
				this.list=[]
				this.num=1
				this.getlist()
			},
			// 获取数据
			async getlist() {
				let data = {
					pageNum: this.num,
					pageSize: 10,
				}
				if (this.addressName != "全国") {
					data.addressName = this.addressName
				}
				if (this.provinceId != null) {
					data.provinceId = this.provinceId
				}
				if (this.cityId != null) {
					data.cityId = this.cityId
				}
				if (this.areaId != null) {
					data.areaId = this.areaId
				}
				if (this.streetId != null) {
					data.streetId = this.streetId
				}
				if (this.goodsName.trim() != "") {
					data.goodsName = this.goodsName
				}
				if(this.screenType==1){
					data.screenType=this.screenType
				}
				if(this.isEnableGrade!=null){
					data.isEnableGrade=this.isEnableGrade
				}
				let res = await this.get(productlist, data)
				this.list = [...this.list, ...res.data]
				this.num++
			},
			// 计算距离
			caculateLL(lat1, lng1, lat2, lng2) {
				var radLat1 = lat1 * Math.PI / 180.0;
				var radLat2 = lat2 * Math.PI / 180.0;
				var a = radLat1 - radLat2;
				var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(
					radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137;
				s = Math.round(s * 10000) / 10000;
				console.log(s)
				return s.toFixed(2)+"Km"
			},
			// 返回
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			tocart(){
				uni.navigateTo({
					url:"/pages/cart/cart"
				})
			}
		}
	}
</script>

<style>
	.se{
		position: absolute;
		top: 24rpx;
		right: 100rpx;
		color: #F09238;
	}
	.g_f {
		height: 33rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 33rpx;
		color: #999999;
		opacity: 1;
		position: absolute;
		bottom: 0;
	}

	.num {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 34rpx;
		color: #999999;
		opacity: 1;
	}

	.price {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 42rpx;
		color: #F09238;
		opacity: 1;
		margin-right: 20rpx;
	}

	.pricebox {
		/* display: flex; */
		align-items: center;
		margin-top: 20rpx;
	}

	.g_t {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 38rpx;
		color: #333333;
		opacity: 1;
		display: -webkit-box;
		/*将对象作为弹性伸缩盒子模型显示*/
		overflow: hidden;
		/* 超出的文本隐藏 */
		text-overflow: ellipsis;
		/* 溢出用省略号显示 */
		word-wrap: break-word;
		/* 文本高出宽度换行 */
		white-space: normal !important;
		/* 溢出不换行 */
		-webkit-line-clamp: 2;
		/* 表示显示的行数 */
		-webkit-box-orient: vertical;
		/* 从上到下垂直排列子元素 */
	}

	.right {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 33rpx;
		color: #999999;
		opacity: 1;
		margin-left: 10rpx;
	}

	.goodscon {
		width: 320rpx;
		height: 200rpx;
		position: relative;
	}

	.goodsimg {
		width: 200rpx;
		height: 200rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.item {
		width: 690rpx;
		background-color: #FFFFFF;
		margin-left: 30rpx;
		border-radius: 10rpx;
		padding: 10rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
	}

	.scroll-view {
		height: calc(100vh - 148rpx - var(--status-bar-height));
	}
	.x_item {
		margin: 0 20rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
		opacity: 1;
	}

	.active {
		color: #F09238;
		font-size: 28rpx;
		font-weight: bold;
	}

	.xz_i {
		display: flex;
		align-items: center;
	}

	.xz {
		height: 60rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
	}

	.input {
		width: 560rpx;
		height: 50rpx;
		border: 1px solid #F09238;
		opacity: 1;
		border-radius: 29rpx;
		padding-left: 20rpx;
		color: #999;
		font-size: 26rpx;
	}

	.navbox {
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		height: 88rpx;
		justify-content: space-between;
		position: relative;
	}

	.nav {
		background-color: #FFFFFF;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.con {
		background-color: #F6F6F6;
		min-height: 100vh;
	}
</style>
